<template>
  <van-sticky>
    <van-nav-bar left-text="返回" title="订单支付" left-arrow @click-left="onClickLeft" />
  </van-sticky>

  <div class="box">
    <!-- 背景色 -->
    <div class="content"></div>
    <div class="datia">
      <div class="price">
        <p style="color: #666">订单支付</p>
        <div style="font-size: 1rem; margin-top: 0.5rem">
          <p style="float: left">支付金额</p>
          <p style="color: red; float: right">￥{{ zprice }}</p>
        </div>
        <div style="clear: both"></div>
      </div>
      <div class="hder">
        <div>
          <p style="float: left">优惠卷</p>
          <p style="float: right; color: #666">无可用优惠券 ></p>
        </div>
        <div
          style="clear: both; border-bottom: 1px solid #ccc; margin-top: 2rem; margin-bottom: 1rem"
        ></div>
        <div>
          <p style="float: left">共需支付</p>
          <p style="color: red; float: right">￥{{ zprice }}</p>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="fsi">
        <p style="font-size: 0.9rem; color: #666">选择支付方式</p>
        <div>支付宝支付</div>
      </div>
      <div style="width: 95%; position: fixed; bottom: 2rem; left: 0.5rem" @click="Clickprice">
        <button
          style="background-color: red; border: none; width: 100%; height: 2.5rem; color: #fff"
        >
          立即支付
        </button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../../stores/counter'
import axios from 'axios'
const onClickLeft = () => history.back()
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const orderList = ref(JSON.parse(route.query.data as string))
const order = ref<any>([])
const zprice = ref(route.query.zprice)
localStorage.setItem('isorderfalse', 'false')
var getlist = async () => {}
getlist()
const Clickprice = async () => {
  const orderId = Date.now().toString()
  const returl='http://localhost:5173/parlour'
  axios
    .get('/app/createOrder', {
      params: {
        id: orderId,
        title: '药房',
        desc: '购买药品',
        zprice: zprice.value,
        returl:returl
      },
    })
    .then(async (res) => {
      if (res.data.code == 200) {
        console.log(res.data)
        // window.open(res.data.result)
        const url = res.data.result
        const parsedUrl = new URL(url)
        const params = new URLSearchParams(parsedUrl.search)
        const bizContent = JSON.parse(params.get('biz_content'))
        const outTradeNo = bizContent.out_trade_no
        console.log('订单号:', outTradeNo)
        orderList.value?.forEach((item: any) => {
          item.goods.forEach((item: any) => {
            order.value.push({
              ...item,
              status: '待支付',
              out_trade_no: outTradeNo,
              timestamp:params.get('timestamp')
            })
          })
        })
        console.log(order.value)
        var ress = await axios.post('/app/addOrder', order.value)
        console.log(ress)
        const allData = {
          method: params.get('method'),
          appId: params.get('app_id'),
          charset: params.get('charset'),
          version: params.get('version'),
          signType: params.get('sign_type'),
          timestamp: params.get('timestamp'),
          returnUrl: params.get('return_url'),
          sign: params.get('sign'),
          alipaySdk: params.get('alipay_sdk'),
          subject: bizContent.subject,
          productCode: bizContent.product_code,
          outTradeNo: bizContent.out_trade_no,
          totalAmount: bizContent.total_amount,
          body: bizContent.body,
        }
        console.log(allData)
        if (ress.data.code == 200) {
          const resp = await axios.post('/app/addOrders', allData)
          console.log(resp)
          window.open(res.data.result)
        }
      }
    })
}
</script>

<style lang="scss" scoped>
.box {
  width: 100wv;
  height: 100vh;
  background-color: #f2f2f2;
  font-size: 0.9rem;
  position: relative;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30vh;
  background: linear-gradient(to bottom, rgb(198, 243, 253), #f2f2f2);
}
.datia {
  width: 100%;
  height: 100vh;
  position: absolute;
  height: 100px;
  z-index: 999;
}
.price {
  width: 95%;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 0.5rem;
}
.hder {
  width: 95%;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 0.5rem;
  font-size: 1rem;
}
.fsi {
  width: 95%;
  // background-color: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 0.5rem;
  font-size: 1rem;
}
</style>
